Vue.component('xcform_control_input_date', {
    template: '<el-form-item \
                  :class="value.fieldjsonObj.xcform_prop_required.value?\'required\':\'\'"\
                  :prop="value.fieldcode" \
                  :rules="control.rules"\
                  :label="value.fieldtitle"> \
                  <el-date-picker :key="value.fieldcode" v-model="value.value" type="date" value-format="yyyy-MM-dd"\
                      :popper-append-to-body="false" :placeholder="value.fieldjsonObj.xcform_base_placeholder.value" @foucs="dataPosition(0)"\
                      :disabled="control.disabled"></el-date-picker> \
                </el-form-item>',
    props: {
        value: {
            type: Object,
        },
        disabled: {
            type: Boolean,
        },
        fieldfulljson:{
            type: Array,
        },
        xcform_id: {
          type: Number,
        }
    },
    data() {
        var validateFunction = (rule, value, callback) => {
            var that = this;
            that.value.value = (that.value.value) ? that.value.value : "";

            if (that.value.fieldjsonObj.xcform_prop_required.value) {
                if (that.value.value.length == 0) {
                    return callback(new Error('不能为空'));
                }
            }
            return callback();
        };
        return {
            control: {
                disabled: false,
                rules: [{
                    validator: validateFunction,
                    trigger: 'blur'
                }]
            }
        };
    },
    created() {
        var that = this;
        that.control.disabled = that.disabled;
        if (that.value.fieldjsonObj.xcform_prop_readonly.value) {
            that.control.disabled = true;
        }
    },
    mounted() {
        var that = this;

    },
    methods: {
        dataPosition(val){
            setTimeout(function(){
                var dom = document.querySelector('.el-picker-panel');
                console.log('====', dom);
                dom.style.top = '';
                dom.style.bottom = 0;
            }, 0);
        }
    }
});